<template>
	<view>
		<view style="font-size: 24rpx;margin-left: 20rpx;">数量</view>
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
	</view>
	
</template>

<script>
	import {
		productionline
	} from '@/api/index.js'
	export default {
		props:['year'],
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "stack",
							width: 16,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							labelPosition: "center"
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		watch:{
			year(){
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				productionline(this.year).then(res => {
					// console.log(res);
					const formattedData = this.transformHazardData(res.data);
					this.chartData = JSON.parse(JSON.stringify(formattedData));
				})
				// setTimeout(() => {
				//   //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				//   let res = {
				//       categories: ["01","02"],
				//       series: [
				//         {
				//           name: "发现",
				//           data: [13,5]
				//         },
				//         {
				//           name: "整改",
				//           data: [14,6]
				//         }
				//       ]
				//     };
				//   this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
			transformHazardData(rawData) {
				// 提取所有月份作为categories
				// const categories = rawData.map(item => item.month);
				const categories = rawData.map(item => {
					let month = item.month
					return month.slice(month.indexOf('-') + 1)
				})
				// 获取所有危险源类型（去重）
				const sourceTypes = Array.from(
					new Set(rawData.flatMap(item =>
						item.equipmentList.map(vo => vo.name)
					))
				);
				// 构建series数据结构
				const series = sourceTypes.map(type => {
					return {
						name: type,
						data: rawData.map(item => {
							// 查找当前月份对应源类型的数量
							const target = item.equipmentList.find(vo => vo.name === type);
							return target ? target.value : 0;
						})
					};
				});
				return {
					categories,
					series
				};
			}
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>